<template>
  <el-cascader
    ref="cascader"
    :props="props"
    :value="value"
    v-bind="$attrs"
    :options="options"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :separator="separator"
    :filterable="filterable"
    :collapse-tags="collapseTags"
    :show-all-levels="showAllLevels"
    :size="size"
    @change="handleChange"
    @blur="handleBlur"
    @focus="handleFocus"
    @expand-change="handleExpandChange"
    @visible-change="handleVisibleChange"
  >
    <template v-slot="{node,data}">
      <slot :slotScope="{node,data}" />
    </template>
  </el-cascader>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

interface Props{
  expandTrigger?:string,
  multiple?:boolean,
  checkStrictly?:boolean,
  emitPath?:boolean,
  value?:string,
  label?:string,
  children?:string,
  disabled?:string,
  leaf?:string
}

@Component({
  name: 'MCascader'
})

export default class extends Vue {
  @Prop({ default: 'mini' }) private size?: string; //
  @Prop({ default: '请输入' }) private placeholder?: string; // placeholder
  @Prop({}) private separator?: string; // placeholder
  @Prop({ required: true }) private value?: string[] | string; //

  @Prop({ default: false }) private disabled?: boolean;
  @Prop({ default: false }) private clearable?: boolean;
  @Prop({ default: false }) private filterable?: boolean;
  @Prop({ default: false }) private collapseTags?: boolean;
  @Prop({ default: false }) private showAllLevels?: boolean;
  @Prop({ default: () => {
    return {
      expandTrigger: 'hover',
      emitPath: false,
      checkStrictly: true
    }
  } }) private props?: Props;
  @Prop({ default: () => [] }) private options!: any[];

  mounted() {
    setInterval(function() {
      // 可以点击整行选择
      document.querySelectorAll('.el-cascader-node__label').forEach(el => {
        (el as any).onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click()
        }
      })
    }, 500)
  }
  // 销毁前  移除事件
  beforeDestroy() {
    document.querySelectorAll('.el-cascader-node__label').forEach(el => {
      (el as any).removeEventListener('click', () => {})
    })
  }
  inputLoad(v) {
    this.$emit('input', v)
  }

  handleChange(v) {
    (this.$refs.cascader as any).dropDownVisible = false
    this.$emit('change', v)
  }

  handleExpandChange(v) {
    this.$emit('expandChange', v)
  }

  handleBlur() {
    this.$emit('blur')
  }

  handleFocus() {
    this.$emit('focus')
  }

  handleVisibleChange(v) {
    this.$emit('visible-change', v)
  }

  // 获取选中的节点
  getCheckedNodes(leafOnly?:boolean) {
    return (this.$refs.cascader as any).getCheckedNodes(leafOnly)
  }
}
</script>
